<!--
 * @Description: 
 * @Version: 0.0
 * @Author: taosong
 * @Date: 2023-04-02 15:29:18
 * @LastEditors: taosong
 * @LastEditTime: 2023-04-02 15:49:58
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>绘制一个移动的点</title>
    <script src="../libs/index.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      canvas {
        background-color: yellow;
        margin: 50px auto;
      }
    </style>
  </head>
  <body>
    <canvas
      width="400"
      height="400"
      id="canvas"
      >此浏览器不支持canvas</canvas
    >

    <script>
      /** @type {HTMLCanvasElement} */
      let ctx = document.getElementById('canvas')
      let gl = ctx.getContext('webgl')

      // 绘制顶点着色器
      const VERTEX_SHADER_SOURCE = `
        // 定义一个变量
        attribute vec4 aPosition;
        void main() {
          gl_Position = aPosition;
          gl_PointSize = 10.0;
        }
      `
      // ，绘制片元着色器
      const FRAGMENT_SHADER_SOURCE = `
        void main() {
          gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }
      `

      const program = initShader(
        gl,
        VERTEX_SHADER_SOURCE,
        FRAGMENT_SHADER_SOURCE
      )

      const aPosition = gl.getAttribLocation(program, 'aPosition')

      let x = -0.8
      setInterval(() => {
        x += 0.1
        if (x > 1) {
          x = -0.8
        }
        gl.vertexAttrib1f(aPosition, x)
        gl.drawArrays(gl.POINTS, 0, 1)
      }, 200)
    </script>
  </body>
</html>
